<template>
  <div class="content-wrapper">
    <!-- <div class="content-header"></div>
    <div class="title">
      <div>仓库管理</div>
    </div>
    <el-divider /> -->
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="仓库名称">
          <el-input v-model="listQuery.warehouseName" type="text" size="mini" />
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="mini"
            round
            type="primary"
            icon="el-icon-search"
            @click="search"
          >
            搜索
          </el-button>
          <el-button
            class="filter-item"
            size="mini"
            round
            icon="el-icon-plus"
            @click="handleCreate(1)"
          >
            新建
          </el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="listLoading"
        :data="warehouseDataList"
        align="left"
        highlight-current-row
      >
        <el-table-column label="仓库名称" prop="warehouseName" width="150px" />
        <el-table-column label="状态" prop="status" width="100px">
          <template slot-scope="{ row }">
            <el-tag v-if="row.status == 1" type="success"> 启用 </el-tag>
            <el-tag v-if="row.status == 2" type="danger">停用</el-tag>
            <el-tag v-if="row.status == 0" type="info">存盘 </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="负责人" prop="principal" width="100px" />
        <el-table-column label="负责人电话" prop="tel" width="100px" />
        <el-table-column label="地址" prop="address" min-width="200px" />
        <el-table-column
          label="隶属部门"
          prop="warehousePermissionCollection"
          width="200px"
        >
          <template slot-scope="{ row }">
            <span
              v-for="item in row.warehousePermissionCollection"
              :key="item.accessId"
            >
              {{ item.accessName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="memo" min-width="200px" />
        <el-table-column
          label="操作"
          align="center"
          width="150px"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <el-dropdown trigger="click" class="filter-item">
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item @click.native="setPermission(row)"
                  >隶属部门</el-dropdown-item
                >
                <el-dropdown-item @click.native="handleCreate(2, row)"
                  >编辑</el-dropdown-item
                >
                <el-dropdown-item
                  v-if="row.status == 1"
                  @click.native="updatedStatus(row, 2)"
                  >停用</el-dropdown-item
                >
                <el-dropdown-item
                  v-if="row.status == 2"
                  @click.native="updatedStatus(row, 1)"
                  >启用</el-dropdown-item
                >
                <el-dropdown-item @click.native="removeWarehouse(row)"
                  >删除</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <!-- <Pagination
        v-show="total > 0"
        :total="total"
        :page-number.sync="listQuery.pageNumber"
        :page-size.sync="listQuery.pageSize"
        @pagination="getWarehouseData"
      /> -->
      <el-drawer :title="title" :visible.sync="dialogFormVisible">
        <el-form
          ref="dataForm"
          :model="temp"
          :rules="rules"
          label-position="right"
          label-width="120px"
          style="width: 480px"
        >
          <!-- <el-form-item label="状态" prop="status">
            <el-select v-model="temp.status" placeholder="请选择" prop="status">
              <el-option
                v-for="item in statusOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item label="仓库名称" prop="warehouseName">
            <el-input v-model="temp.warehouseName" />
          </el-form-item>
          <el-form-item label="负责人">
            <el-input v-model="temp.principal" />
          </el-form-item>
          <el-form-item label="负责人电话">
            <el-input v-model="temp.tel" />
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="temp.address" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="temp.memo" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="createAreaData()">提交</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
      <el-drawer title="隶属部门设置" :visible.sync="openPermissionDrawer">
        <el-form
          ref="dataForm"
          :model="temp"
          :rules="rules"
          label-position="right"
          label-width="120px"
          style="width: 480px"
        >
          <el-form-item label="状态">
            <el-select
              v-model="SaveWarehousePermissionRequest"
              filterable
              multiple
              placeholder="请选择"
              prop="status"
            >
              <el-option
                v-for="item in BranchList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="pushPermissionData()"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import {
  saveWarehouse,
  updateWarehouse,
  deleteWarehouse,
  getWarehouseOptions
} from '@/api/base/warehouse.js'
import { getBranchList } from '@/api/uc/search.js'
import {
  saveWarehousePermission,
  getWarehousePermissionList
} from '@/api/wms/warehousePermission.js'

export default {
  data() {
    return {
      listLoading: false,
      total: 0,
      warehouseDataList: [],
      listQuery: {
        pageIndex: 0,
        pageSize: 10
      },
      temp: {
        status: 1
      },
      statusOptions: [],
      rules: {
        warehouseName: [
          { required: true, message: '请输入仓库名称', trigger: 'blur' }
        ],
        updatedStatus: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      },
      dialogFormVisible: false,
      openPermissionDrawer: false,
      BranchList: [],
      SaveWarehousePermissionRequest: null,
      warehouseId: '',
      title: '',
      TYPE: ''
    }
  },
  mounted() {
    this.getOptions()
  },
  methods: {
    async getOptions() {
      const { data } = await getWarehouseOptions()
      this.statusOptions = data.status
      console.log(this.statusOptions)

      this.getWarehouseData()
      this.getBranch()
    },
    getBranch() {
      getBranchList().then((res) => {
        this.getItem(res.data.groupUserTree, this.BranchList)
      })
    },
    // 递归树
    getItem(data, list) {
      data.forEach((item) => {
        if (item.children) {
          this.getItem(item.children, list)
        } else {
          list.push(item)
        }
      })
    },
    search() {
      const data = this.listQuery
      this.listLoading = true
      getWarehousePermissionList(data).then((res) => {
        this.warehouseDataList = res.data
        this.listLoading = false
      })
    },
    view(row, index) {
      console.log(row)
    },
    resetTemp() {
      this.temp = {}
    },
    handleCreate(index, row) {
      this.dialogFormVisible = true
      if (index == 1) {
        this.title = '新建仓库'
        this.TYPE = index
      } else {
        this.title = '编辑仓库'
        this.temp = row
        this.TYPE = index
        console.log(row, 'oe')
      }
    },
    createAreaData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.listLoading = true
          const data = this.temp
          if (this.TYPE == 1) {
            saveWarehouse(data).then(() => {
              this.listLoading = false
              this.$message.success('新增成功')
              this.dialogFormVisible = false
              this.getWarehouseData()
            })
          } else {
            updateWarehouse(data).then(() => {
              this.listLoading = false
              this.$message.success('编辑成功')
              this.dialogFormVisible = false
              this.getWarehouseData()
            })
          }
        }
      })
    },
    updatedStatus(row, index) {
      const data = row
      data.status = index
      updateWarehouse(data).then(() => {
        this.listLoading = false
        this.$message.success('更新成功')
        this.dialogFormVisible = false
        this.getWarehouseData()
      })
    },
    getWarehouseData() {
      const data = this.listQuery
      this.listLoading = true
      getWarehousePermissionList(data).then((res) => {
        this.warehouseDataList = res.data
        // this.total = res.data.total
        this.listLoading = false
      })
    },
    setPermission(row) {
      this.warehouseId = row.warehouseId
      this.openPermissionDrawer = true
      const ID = []
      console.log(row.warehousePermissionCollection);
      if (row.warehousePermissionCollection) {
        row.warehousePermissionCollection.forEach((e) => {
          ID.push(e.accessId)
        })
      }

      this.SaveWarehousePermissionRequest = ID
    },
    pushPermissionData() {
      const data = {}
      const accessList = []
      this.SaveWarehousePermissionRequest.forEach((e) => {
        accessList.push({
          accessId: e,
          type: 1
        })
      })
      data.accessList = accessList
      data.warehouseId = this.warehouseId
      saveWarehousePermission(data).then(() => {
        this.$message.success('设置成功')
        this.getWarehouseData()
        this.openPermissionDrawer = false
      })
    },
    removeWarehouse(row) {
      this.$confirm('此操作将永久删除该仓库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteWarehouse({ warehouseId: row.warehouseId }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getWarehouseData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
